<style>
    #scroller ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: left;
    }

    #scroller li {
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #fff;
        background-color: #fafafa;
        font-size: 14px;
    }
    #letter{
        position:absolute;
        text-align: center;
        width:25px;
        right:20px;
        top: 50px;
        background-color: #ebebeb;
        z-index:9999;
        display:block;

    }
    #letter li{
        margin: 0 0 0 5px;
        padding: 0;
        width: 5px;
        /*background-color: #000;*/
        color:#000;
    }
    #letter li a{
        color: #000;
    }
    #letter ul{
        margin: 0;
        padding: 2px;
        font-size: 14px;
        height: 290px;
        list-style-type:none;
        width: 10px;
    }

    #scroller1 ul {
        list-style: none;
        padding: 0;
        margin: 3px;
        width: 100%;
        text-align: left;
    }

    #scroller1 li {
        padding: 0px 0px 5px 0;
        text-align: center;
        margin-bottom: 5px;
        width: 25px;
        height: 20px;
        line-height: 25px;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #fff;
        background-color: #fafafa;
        font-size: 14px;
        color: #f64242;
        -webkit-box-shadow:2px 2px 5px #ccc;
        box-shadow:2px 2px 5px #ccc;
        -moz-box-shadow:2px 2px 5px #ccc;
    }
    #wrapper1 {
        position: absolute;
        z-index: 1;
        top: 2.5em;
        bottom: 2.5em;
        left: 0;
        width: 100%;
        background: #ffffff;
        overflow: hidden;
    }

    #scroller1 {
        background-color: #fafafa;
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        padding-left: 0%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }
    #scroller1 li{
        border-radius: 50%;
    }

</style>

<div id="header">
    <!--<span class="icon-icon-07" style="float: left;margin-left: 1em;line-height: 2.5em" onclick="history.go(-1);"></span><span>选择城市</span>-->
    <i class="icon-icon-07" ng-click="goBack()" style="font-size: 1.2em;padding-left: 0.3em;float: left;position: absolute;line-height: 2.1em;left: 0;" ng-click="goMain()"></i><span>我要发车</span>
<!--onclick="window.history.go(-1);"-->
</div>
<!--<div id="">
    <ul style="">
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(1)'))">#</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(8)'))">A</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(14)'))">B</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(38)'))">C</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(51)'))">D</a></li>
        &lt;!&ndash;<li>E</li>&ndash;&gt;
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(71)'))">F</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(79)'))">G</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(88)'))">H</a></li>
        &lt;!&ndash;<li>I</li>&ndash;&gt;
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(99)'))">J</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(107)'))">K</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(114)'))">L</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(125)'))">M</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(130)'))">N</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(133)'))">O</a></li>
        &lt;!&ndash;<li>P</li>&ndash;&gt;
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(135)'))">Q</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(143)'))">R</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(145)'))">S</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(162)'))">T</a></li>
        &lt;!&ndash;<li>U</li>&ndash;&gt;
        &lt;!&ndash;<li>V</li>&ndash;&gt;
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(168)'))">W</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(172)'))">X</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(179)'))">Y</a></li>
        <li><a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(192)'))">Z</a></li>
    </ul>
</div>-->
<div id="wrapper" style="background-color: #EEEEEE;font-family: '黑体';width: 89.5%;border-right: 1px solid #ccc">
    <div id="scroller">

        <ul>
            <li ng-repeat="carbrand in carbrands"  ng-click="selectCarbrand(carbrand.id,carbrand.carbrand)">
                <div style="width: 80%;float: left;"><span style="padding-left: 5%;">{{$index+1}}.</span><span style="padding-left: 20%"></span>{{carbrand.carbrand}}</div>
            </li>
        </ul>
    </div>
</div>
<div id="wrapper1" style="background-color: #fafafa;font-family: '黑体';width: 10%;margin-left: 90%">
    <div id="scroller1">

            <ul style="">
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(1)'))"><li>#</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(8)'))"><li>A</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(14)'))"><li>B</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(38)'))"><li>C</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(51)'))"><li>D</li></a>
                <!--<li>E</li>-->
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(71)'))"><li>F</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(79)'))"><li>G</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(88)'))"><li>H</li></a>
                <!--<li>I</li>-->
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(99)'))"><li>J</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(107)'))"><li>K</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(114)'))"><li>L</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(125)'))"><li>M</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(130)'))"><li>N</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(133)'))"><li>O</li></a>
                <!--<li>P</li>-->
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(135)'))"><li>Q</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(143)'))"><li>R</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(145)'))"><li>S</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(162)'))"><li>T</li></a>
                <!--<li>U</li>-->
                <!--<li>V</li>-->
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(168)'))"><li>W</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(172)'))"><li>X</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(179)'))"><li>Y</li></a>
                <a href="javascript:new IScroll('#wrapper', { mouseWheel: true, click: true }).scrollToElement(document.querySelector('#scroller li:nth-child(192)'))"><li>Z</li></a>
            </ul>
    </div>
</div>